Repository navigation
fix(native): expand a transition held in a variable - #497
Open
YevheniiKotyrlo wants to merge 2 commits into
Open
YevheniiKotyrlo wants to merge 2 commits into
YevheniiKotyrlo wants to merge 2 commits into
Conversation
…roperty one home src/compiler/selectors.ts's getSelectors is imported by nothing; the compiler builds selectors in selector-builder.ts. The module stayed alive only through its toRNProperty, which atRules.ts and declarations.ts imported while selector-builder.ts and stylesheet.ts used a second copy. toRNProperty moves to utilities/property-names.ts and every caller imports it from there.
`transition: var(--t)` reached React Native as a raw `transition` array and `transition-property: var(--p)` as the variable's names, because the transition grammar and the property names lived in the compiler. The written path also named a transition by the property's camelCase rather than by the key the property is written to, so `background-image` named `backgroundImage` where its style is `experimental_backgroundImage`. `propertyRename` moves to `utilities` beside `toRNProperty`, with `transitionStyleKey` naming the key a transition animates for both routes. A runtime `transition` resolver reads each comma group by CSS Transitions 1 §2.5 — any order, the first time the duration and the second the delay — into the longhands the compiler builds for a written value, and `transitionProperty` maps a variable's names the same way.
YevheniiKotyrlo
marked this pull request as ready for review
October 16, 2026 15:22
Contributor
Author
This PR's cases —
|
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
A transition held in a variable never reaches React Native as a transition:
transition: var(--t)with--t: width 1s ease-in 200msrenders{ transition: ["width", 1000, "ease-in", 200] }, where the written value renderstransitionProperty,transitionDuration,transitionDelayandtransitionTimingFunction.transition-property: var(--p)names the CSS properties as written,["width", "background-image", "border-inline-start-color"], and no style key is spelled that way.The written path names a transition by the property's camelCase rather than by the key the property is written to, so
transition-property: background-imagenamesbackgroundImagewhere the style isexperimental_backgroundImage, andborder-inline-start-colornamesborderInlineStartColorwhere it isborderStartColor. Such a transition never matches the style it was written for.Solution
propertyRenamemoves toutilitiesbesidetoRNProperty, andtransitionStyleKeynames the key a transition animates, for the compiler and the runtime alike.transitionandtransition-propertyresolve at runtime when written with avar(). Thetransitionresolver reads each comma group by CSS Transitions 1 §2.5 — any order, the first time the duration and the second the delay — into the longhands the compiler builds for a written value, and gives up on a group that is not a transition.transitionPropertymaps a variable's names throughtransitionStyleKey.A list whose every group is one token reaches the runtime without its commas, so
width opacityreads aswidth, opacity, the only reading a valid transition allows; keeping the separator is a change of its own.Tests
src/__tests__/native/transition-variables.test.tsxrenders a written transition and the same value through a variable, for seven values: one transition, a list, properties alone,cubic-bezier(), a renamed property,alland a time alone. It also covers the keys a written and a variabletransition-propertyname, and two invalid variable values. All 11 fail onmain.src/__tests__/utilities/property-names.test.tsholds every renamed property's transition to the key it is written to.Verification
On Ubuntu with the workflow's steps - build, lint, typecheck,
yarn test,node --test node/__tests__/*.mjs, both library builds, the web export, the unstaged-changes checks and commitlint - everything passes.This PR's cases, run on
mainand here: #497 (comment)Merge order
Stacked on #491, which gives
toRNPropertytheutilitieshome this extends, so #491 lands first.